<template>
  <div class="app-container">
    <div class="app-top">
      <div class="input-line">
        <span class="input-label">部门名称：</span>
        <el-input v-model="tableParam.deptName" placeholder="请输入" style="width:210px" clearable />
      </div>
      <div class="input-line">
        <span class="input-label">状态：</span>
        <el-select v-model="tableParam.status" placeholder="请选择" style="width:120px">
          <el-option label="全部" :value="null" />
          <el-option label="正常" :value="1" />
          <el-option label="禁用" :value="0" />
        </el-select>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="tableParam.page=1,fetchData()">搜索</el-button>
      </div>
    </div>
    <div class="tree">
      <div class="tree-tree scroll">
        <el-tree :data="treeData" :props="defaultProps" default-expand-all :expand-on-click-node="false" />
      </div>
      <div class="tree-table">
        <div class="function">
          <el-button v-if="$store.getters.buttonList.includes('teams_add')" type="primary" icon="el-icon-plus" size="mini" @click="open('dialog')">添加</el-button>
        </div>
        <el-table v-loading="listLoading" :data="list" border :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" tooltip-effect="dark">
          <el-table-column align="center" label="部门编号" prop="deptCode" />
          <el-table-column align="center" label="部门名称" prop="deptName" />
          <el-table-column align="center" label="描述" prop="remark" />
          <el-table-column label="状态" align="center" width="140">
            <template slot-scope="scope">
              <el-switch v-if="$store.getters.buttonList.includes('teams_status')" v-model="scope.row.status" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" active-text="启用" inactive-text="禁用" @change="setStatus(scope.row)" />
              <div v-else>
                <el-tag v-if="scope.row.status*1==1" type="success">启用</el-tag>
                <el-tag v-else type="danger">禁用</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" align="center" prop="updateTime" />
          <el-table-column label="操作" width="120" align="center" fixed="right">
            <template slot-scope="scope">
              <div class="link">
                <el-link v-if="$store.getters.buttonList.includes('teams_edit')" type="primary" @click="open('dialog', scope.row)">编辑</el-link>
                <el-link v-if="$store.getters.buttonList.includes('teams_del')" type="danger" @click="del(scope.row.id)">删除部门</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="app-pagination">
          <el-pagination :current-page.sync="tableParam.page" :page-sizes="[10, 20, 30, 40]" :page-size="tableParam.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="sizeData" @current-change="fetchData()" />
          <el-button type="primary" size="mini" icon="el-icon-refresh" @click="fetchData()">刷新</el-button>
        </div>
      </div>
      <AllDialog :dialog="dialog" :row="row" node-key="id" @reset="reset" @submit="submit" />
    </div>
  </div>
</template>

<script>
import { getDepts, updateDept, deleteDept } from '@/api/teams'
const AllDialog = () => import('./dialog.vue')
export default {
  name: 'User',
  components: {
    AllDialog
  },
  data() {
    return {
      list: null,
      listLoading: true,
      tableParam: {
        page: 1,
        pageSize: 10,
        roleName: ''
      },
      total: null,
      dialog: false,
      row: null,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'deptName'
      }
    }
  },
  created() {
    this.fetchData()
    this.getTreeData()
  },
  methods: {
    open(key, row) {
      this.row = row
      this[key] = true
    },
    reset(key) {
      this[key] = false
    },
    submit(key) {
      this[key] = false
      this.fetchData()
      this.getTreeData()
    },
    setStatus(row) {
      updateDept({ id: row.id, status: row.status }).then(res => {
        if (res.code * 1 === 200) {
          this.getTreeData()
          this.$message({
            message: `状态更新成功`,
            type: 'success',
            showClose: true
          })
          row.updateTime = res.data.updateTime
        }
      }).catch(() => {
        row.status = row.status * 1 === 0 ? 1 : 0
      })
    },
    del(id) {
      this.$confirm(`此操作将删除该部门, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDept({ id: id }).then(res => {
          if (res.code * 1 === 200) {
            this.$message({
              message: `删除成功`,
              type: 'success',
              showClose: true
            })
            this.fetchData()
            this.getTreeData()
          }
        })
      }).catch(() => {
      })
    },
    sizeData(e) {
      this.tableParam.page = 1
      this.tableParam.pageSize = e
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      getDepts(this.tableParam).then(res => {
        this.list = res.data.row
        this.total = res.data.total
        this.listLoading = false
      })
    },
    getTreeData() {
      const params = {
        page: 1,
        status: 1,
        pageSize: 999
      }
      getDepts(params).then(res => {
        // this.treeData = res.data.row
        const dataArr = res.data.row
        const result = dataArr.reduce((prev, next) => {
          prev[next.pid] ? prev[next.pid].push(next) : prev[next.pid] = [next]
          return prev
        }, {})

        Object.keys(result).map(key => {
          result[key].map((item, i) => {
            result[item.id] ? item.children = result[item.id] : ''
          })
        })
        this.treeData = result[0]
        console.log(result[0])
      })
    }
  }
}
</script>
